<template>
	<div class="raidersManage">
		<uni_tab :tabCur.sync="tabActive" :tab-list="conle_tabList" @change="swiperChange"></uni_tab>

		<view class="contentBox">
			<view v-if="tabActive==0">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAA="{item}">
						<div class="center_title">{{item.cat_name || '暂无' }}</div>
					</template>
					<template v-slot:shopAwx0="{item}">
						<div class="item_list_title">
						<app-user-attr v-if="item.share_user_list && item.share_user_list.length > 0"
									   :data="item.share_user_list" :maxLength="2"></app-user-attr>
						<div>
							<span>{{ item.extension_num || 0 }}人已推广,</span>
							<span>浏览{{ item.view_num || 0 }}人</span>
						</div>
						</div>
					</template>
					<template v-slot:shopBwx0="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" v-if="item.is_top != 1"
								 @click.stop="setTopBtn(item.article_relevance_id)">置顶
							</div>
							<div class="shop_btn_com" @click.stop="setSaleBtnFn(0, item.article_relevance_id)">下架
							</div>
							<div class="shop_btn_com share_btn" @click.stop="shareBtnFn(item)">
								<i class="iconfont iconfenxiang"></i>
								<span>推广获客</span>
							</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template #bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com" @click="allSetSaleBtnFn(0)">批量下架</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==1">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAA="{item}">
						<div class="center_title">{{item.cat_name || '暂无' }}</div>
					</template>
					<template v-slot:shopAwx1="{item}">
						<div class="item_list_title">
						<app-user-attr v-if="item.share_user_list && item.share_user_list.length > 0"
									   :data="item.share_user_list" :maxLength="2"></app-user-attr>
						<div>
							<span>{{ item.extension_num || 0 }}人已推广,</span>
							<span>浏览{{ item.view_num || 0 }}人</span>
						</div>
						</div>
					</template>
					<template v-slot:shopBwx1="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com" @click.stop="delSaleBtnFn(item.article_relevance_id)">删除</div>
							<div class="shop_btn_com primary_btn"
								 @click.stop="setSaleBtnFn(1, item.article_relevance_id)">上架
							</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template #bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com" @click="allDelSaleBtnFn">删除</div>
							<div class="shop_btn_com primary_btn" @click="allSetSaleBtnFn(1)">上架</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<view v-if="tabActive==2">
				<app-manage-list :manageData="manageData"
								 :list="list"
								 @onSearch="onSearch"
								 @openPopup="openPopup"
								 @checkList="checkList"
								 @changeAllCheck="changeAllCheck"
								 @jumpListFn="jumpListFn">
					<template v-slot:shopAA="{item}">
						<div class="center_title">{{item.cat_name || '暂无' }}</div>
					</template>
					<template v-slot:shopBwx2="{item}">
						<div class="item_list_bottom">
							<div class="shop_btn_com primary_btn" @click.stop="setSaleBtnFn(1, item.article_id)">上架</div>
						</div>
					</template>
					<!-- 底部按钮 -->
					<template #bottomBtnWrap>
						<div class="shop_btn_wrap">
							<div class="shop_btn_com primary_btn" @click="allSetSaleBtnFn(1)">批量上架</div>
						</div>
					</template>
				</app-manage-list>
			</view>
			<!-- <view v-if="list.finished||list.data.length===list.total" class="noMore">没有更多了</view> -->
		</view>

		<!--筛选弹窗-->
		<view class="filter_wrap">
			<screen :filterMaskData.sync="filterMaskData" @filterQuery="filterQuery" @filterBtnCall="filterBtnCall"
					ref="screen"></screen>
		</view>
		<!-- 分享弹窗 -->
		<v-sharePoster ref="sharePoster" :type="4"></v-sharePoster>
	</div>
</template>
<script>
import uni_tab from '@/components/uni_tab.vue'
import { mapGetters, mapState } from 'vuex'
import AppManageList from '@/components/appManageList'
import AppUserAttr from '@/pages/components/appUserAttr'
import SharePoster from '@/pages/components/sharePoster'
import manage from './mixins/manage'
import screen from '@/components/App_screen.vue'

// js
import list from '@/mixins/list'

// api
import {
	getClass,
	getListTotal,
	getOnList,
	getOffList,
	getPubliclist,
	publicPutOn,
	putOn,
	putOff,
	setTop,
	listDel
} from '@/api/article/process'

export default {
	name: 'process-manage',
	mixins: [manage, list],
	components: {
		AppManageList,
		AppUserAttr,
		'v-sharePoster': SharePoster,
		uni_tab,
		screen
	},
	data() {
		return {
			constant: this.$constant,
			tabActive: 0,
			tabList: [{ name: '展示中' }, { name: '已下架' }, { name: '内容中心' }],
			conle_tabList: [],
			cloneFilterMaskData: [],
			filterMaskData: [
				{
					title: '装修风格',
					// type: 2,
					key: 'case_style',
					list: []
				},
				{
					title: '来源',
					// type: 2,
					hide: false,
					key: 'is_public',
					list: []
				}
			]
		}
	},
	computed: {
		...mapGetters({ userInfo: 'getUser' })
	},
	onLoad(option) {
		this.init()
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.resize()
	},
	// 加载更多
	onReachBottom() {
		if (this.list.data.length < this.list.total) {
			this.getItemList()
		}
	},
	methods: {
		init() {
			this._getListTotal()
			this._getClass()
			this.getItemList()
		},

		resize() {
			let data = this.manageData
			data.checkList = []
			this.resetList()
			this._getListTotal()
			this.getItemList()
		},
		// ==获取列表==
		getItemList: function() {
			let that = this
			let hostData = { ...this.manageData }
			let hostFn = this.tabActive === 0 ? getOnList : this.tabActive === 1 ? getOffList : getPubliclist
			let params = {
				page: that.list.page,
				limit: that.list.limit
			}
			if (hostData) {
				// 是否有搜索
				if (hostData.search) {
					params.name = hostData.search
				}
				if (hostData.isFilterList) {
					// 是否有筛选分类
					if (hostData.isFilterList.catData) {
						params.cat_id = hostData.isFilterList.catData.id
					}
					if (hostData.isFilterList.typeData) {
						params.is_public = hostData.isFilterList.typeData.id
					}
				}
			}

			hostFn(params).then(res => {
				uni.stopPullDownRefresh()
				if (res.status === 'success') {
					let data = res.data
					for (let i in data.list) {
						data.list[i].status = false
						data.list[i]._optionId = this.tabActive === 2 ? data.list[i].article_id : data.list[i].article_relevance_id
						data.list[i]._imgUrl = data.list[i].cover_img
						data.list[i]._title = data.list[i].title
						data.list[i]._isSelf = data.list[i].is_public || 0
						data.list[i]._isSelfText = data.list[i].is_public == 1 ? '平台' : ''
					}
					that.completes(res)
				}
			})
		},
		// ==获取title总数==
		_getListTotal() {
			let that = this
			return getListTotal().then(res => {
				if (res.status == 'success') {
					let data = res.data
					this.conle_tabList = that.commonJS.deepCopy(that.tabList)
					this.conle_tabList[0]['name'] = ` ${that.tabList[0]['name']}(${data.show_num})`
					this.conle_tabList[1]['name'] = ` ${that.tabList[1]['name']}(${data.hidden_num})`
					this.conle_tabList[2]['name'] = ` ${that.tabList[2]['name']}(${data.public_num})`
				}
			})
		},
		// ==tab滑动切换==
		swiperChange(index) {
			this.tabActive = index
			this.filterQuery()
		},
		// 获取分类筛选
		_getClass(filterData) {
			let that = this
			getClass().then(res => {
				if (res.status == 'success') {
					that.filterMaskData[0].list = this.formatSelect(res.data.class_list)
					that.filterMaskData[1].list = this.formatSelect(res.data.type_list)
					that.cloneFilterMaskData = that.commonJS.deepCopy(that.filterMaskData)
				}
			})
		},
		formatSelect(data, type) {
			return data.map(i => ({
				name: this.$util.isEmpty(i.cat_name) ? i.type_name : i.cat_name,
				status: false,
				id: this.$util.isEmpty(i.cat_id) ? i.is_public : i.cat_id,
				type: this.$util.isEmpty(i.cat_id) ? 'type_list' : ''
			}))
		},
		// 置顶
		setTopBtn(id) {
			let params = {
				case_relevance_id: id
			}
			this.setTopBtnFn(setTop, params)
		},
		// 上下架
		setSaleBtnFn(type, id) {
			let params = {}
			if (this.tabActive == 2) {
				params.case_id = id
			} else {
				params.article_relevance_id = id
			}

			let hostFn = this.tabActive == 2 ? publicPutOn : type === 0 ? putOff : putOn
			this.setSaleStatusFn(hostFn, params, type, () => {
				this.resize()
			})
		},
		// 批量上下架
		allSetSaleBtnFn(type) {
			let data = this.manageData
			let article_id_arr = data.checkList.join(',')
			let params = {}
			if (this.tabActive == 2) {
				params.article_id = article_id_arr
			} else {
				params.article_relevance_id = article_id_arr
			}

			let hostFn = this.tabActive == 2 ? publicPutOn : type === 0 ? putOff : putOn
			this.setSaleStatusFn(hostFn, params, type, () => {
				this.resize()
			})
		},

		// 删除
		delSaleBtnFn(id) {
			let params = {
				owner_user_id: this.userInfo.user_id,
				article_relevance_id: id
			}
			this.delGoodsFn(listDel, params, () => {
				this.resize()
			}, '工艺')
		},
		// 批量删除
		allDelSaleBtnFn() {
			let data = this.manageData
			let article_id_arr = data.checkList.join(',')
			console.log(this.userInfo)
			let params = {
				owner_user_id: this.userInfo.user_id,
				article_relevance_id: article_id_arr
			}
			this.delGoodsFn(listDel, params, () => {
				this.resize()
			})
		},
		// todo 新增文章
		addRaiders() {
			this.$router.push({
				name: 'addTxt',
				query: {
					owner_user_id: this.userInfo.user_id
				}
			})
		},
		// 列表分享按钮
		shareBtnFn(item) {
			let data = {
				url: true,
				id: item.article_id
			}
			this.$refs.sharePoster.showMask(data, true)
		},
		//  跳转列表
		jumpListFn(item) {
			let goBackType = item.article_relevance_id ? '' : 'editadarticle'
			let query = {
				owner_user_id: this.userInfo.user_id,
				mainId: item.article_id,
				articleid: 'null',
				// articleid: item._optionId,
				gobackt: goBackType
			}
			uni.navigateTo({
				url: `/pages/case/casedetail${this.commonJS.queryData(query)}`
			})
		},

		// ===筛选===
		openPopup() {
			this.$refs.screen.openPopup()
		},
		// 筛选按钮回调
		filterBtnCall(items) {
			let data = this.manageData
			data.isFilterList.typeData = ''
			data.isFilterList.catData = ''
			for (let i = 0; i < items.selectList.length; i++) {
				if (items.selectList[i].type == 'type_list') {
					data.isFilterList.typeData = items.selectList[i].status ? items.selectList[i] : ''
				} else {
					data.isFilterList.catData = items.selectList[i].status ? items.selectList[i] : ''
				}
			}
			this.resize()
		},
		// 重置过滤器
		filterQuery() {
			this.manageData.isFilterList.typeData = ''
			this.manageData.isFilterList.catData = ''

			this.filterMaskData = this.commonJS.deepCopy(this.cloneFilterMaskData)
			this.resize()
		}
	}
}
</script>
<style lang="scss" scoped>
	uni-swiper {
		height: 100vh;
		position: fixed;
		width: 100%;
		top: 0;

		swiper-item {
			margin-top: 92px;
		}

		.filter_mask_wrap {
			top: -120px !important;
		}
	}

	.raidersManage {
		width: 100%;
		height: 100%;
		background-color: #f3f5f7;

		.contentBox {
			margin-top: 100px;
			background-color: #f3f5f7;
			padding-bottom: 150px;
		}

		.wrap_top {
			// height: calc(100% - 94px); /*no*/
			height: calc(100% - 44px); /*no*/
			.van-tabs__content,
			.van-tab__pane {
				height: 100%;
			}
		}

		.share_info {
			@include disFlexCen;
			margin-top: 10px;

			.moduleUserAttr {
				margin-right: 10px;
			}
		}

		// 公共按钮
		.shop_btn_com {
			display: flex;
			align-items: center;
			height: 56px;
			padding: 0 40px;
			font-size: 30px;
			border-radius: 50px;
			border: 1px solid $borderColorMain; /*no*/
			margin-left: 20px;
		}

		.primary_btn {
			color: #3a1b04;
			background-color: $mainColor;
			border: 1px solid $mainColor;
		}

		.no_primary_btn {
			color: #fff;
			background-color: #ccc;
			border: 1px solid #ccc;
		}

		.red_text {
			color: #e43c36;
		}

		.sub_text_color {
			color: $fontColor2;
		}

		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
</style>
<style lang="scss" scoped>
	.moduleShopList {
		/*公共列表*/
		.content_list_wrap {
			width: 100%;
			// height: calc(100% - 89px); /*no*/
			height: calc(100% - 139px); /*no*/
			overflow-y: auto;
			// .van-pull-refresh, .van-pull-refresh__track, .van-list {
			//     height: 100%;
			// }
			.item_list {
				margin: 20px 30px;
				padding: 30px 20px 20px;
				background-color: #fff;
				border-radius: 16px;

				.item_list_top {
					display: flex;
					align-items: center;

					.img_blo {
						width: 180px;
						height: 180px;
						margin: 0 20px;
						flex-shrink: 0;

						img {
							object-fit: cover;
							border-radius: 10px;
							width: 180px;
							height: 180px;
						}
					}

					.shop_wrap {
						color: $fontColor2;

						.shop_title {
							font-size: 30px;
							font-weight: 600;
							margin-bottom: 16px;
							color: #333;
							min-height: 80px;

							.shop_title_tag {
								font-size: 24px;
								font-weight: 400;
								padding: 0 6px;
							}

							.shop_title_tag.self_tag {
								color: #ff6900;
								background-color: #fff5ef;
							}

							.shop_title_tag.merchant_tag {
								color: #2965fe;
								background-color: #f3f3fe;
								padding: 0;
							}
						}

						& > div:nth-child(2) {
							margin-bottom: 4px;
						}
					}
				}
				.center_title{
					margin-top: 20px;
				}
				.item_list_title{
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					flex: 1;
					min-height: 80px;
				}
				.item_list_bottom {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 30px;

					.share_btn {
						color: #fff;
						border-color: #ff7d6d;
						background: linear-gradient(90deg, #ff7d6d, #ff4444);
						font-size: 24px;
						padding: 0 30px;
						.iconfenxiang{
							font-size: 24px;
						}

						i {
							margin-right: 6px;
						}

						.big_text {
							font-size: 32px;
						}
					}
				}
			}
		}
		.shop_btn_wrap{
			display: flex;
			justify-content: end;
			align-items: center;
		}
	}
</style>
